/*
  学习目标：react-练习
  注意点：
  1. 因为代码都是js，所以要注意js的关键字 
  2. react不会解析node节点，如果需要写更多的 node 节点，可以先创建，然后放到结构中即可
  3. ReactDOM.render 报错暂时不管，因为它可以在react18的版本使用，也兼容了之前那的版本
*/
import React from "react";
import ReactDOM from "react-dom";

// class 是关键词，所以添加类名使用 className
// const demo = React.createElement(
//   "div",
//   { id: "box", className: "demo" },
//   "这是一个react案例"
// );

// ReactDOM.render(demo, document.getElementById("root"));

// react不会解析node节点，只会当做是字符串
// 标签没属性时，可以写一个 {}
const liNode1 = React.createElement("li", {}, "香蕉");
const liNode2 = React.createElement("li", {}, "橘子");
const liNode3 = React.createElement("li", {}, "苹果");
const ulNode = React.createElement(
  "ul",
  { className: "list" },
  liNode1,
  liNode2,
  liNode3
);

ReactDOM.render(ulNode, document.getElementById("root"));
